// 页面中有form标签 
// 获取标签form标签 添加 submit 提交事件
// 执行提交实现时需要阻止默认事件执行

// 获取标签 

// form标签
const oForm = document.querySelector('form');

// 账号input标签
const oIptName = document.querySelector('[name="name"]');

// 密码input标签
const oIptPwd = document.querySelector('[name="pwd"]');

// 写入提示信息标签
const oH3 = document.querySelector('h3');

// 给 form标签 添加 submit 提交事件
oForm.addEventListener('submit', function (event) {
    // 通过事件对象阻止默认事件执行
    event.preventDefault();

    // 获取数据
    let name = oIptName.value;
    let pwd = oIptPwd.value;

    // 应该是 针对账号密码执行 验证操作
    // 如果 账号密码 不符合格式规范
    // 输入提示信息 终止之后程序执行

    // 通过 调用 async 定义的函数 执行异步请求
    setLogin();
})

async function setLogin() {
    // 获取数据
    let name = oIptName.value;
    let pwd = oIptPwd.value;

    // 通过 await调用 封装的promise函数
    const res = JSON.parse(await myPromise({
        url: 'http://localhost:8888/users/login',
        type: 'post',
        data: {
            username: name,
            password: pwd,
        },

    }))

    // 根据 res中 code数据 动态渲染生成页面
    if (res.code === 0) {
        // 登录失败
        oH3.innerHTML = `<span style="color:red">${res.message}</span>`;

    } else if (res.code === 1) {
        console.log(res);
        // 登录成功 存储 登录信息 
        // res.user 以 对象的形式 存储 当前登录人员的相关信息
        // res.token 以 字符串形式 存储 后端程序中 关键的数据参数
        // 这些信息需要存储在本地数据中
        // user 是一个对象 需要转化为json字符串存储到 localStorage 中
        // token 直接存储到 localStorage 中
        window.localStorage.user = JSON.stringify(res.user);
        window.localStorage.token = JSON.stringify(res.token);


        // 登录成功 倒计时跳转效果

        let num = 5;

        oH3.innerHTML = `<span style="color:blue">登录成功 ${num}秒 以后 返回上一个页面 点击跳转 <a href="./index.html">首页面</a></span>`;

        let time = setInterval(function () {
            // 每秒数值累加1
            num--;

            // 当 计时 累减到 0 时
            if (num == 0) {
                // 清除定时器
                clearInterval(time);

                // 返回 上一个页面
                window.history.back();

                // 终止之后的程序
                return;
            }

            oH3.innerHTML = `<span style="color:blue">登录成功 ${num}秒 以后 返回上一个页面 点击跳转 <a href="./index.html">首页面</a></span>`;

        }, 1000)
    }


}